<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common::head-js">
</head>
<body>
<script th:src="@{../myresource/vui/user/role.js}"></script>
<div>
    <!--内容区域-->
    <div class="lr-layout-wrap panel panel-body fa" style="margin: 5px 10px 5px 5px;width: 99%;">
        <div class="lr-layout-title">
            <i class="icon icon-user"></i>
            <span id="titleinfo">角色信息</span>
        </div>
        <div class="datagrid-tool-right">
            <div class="btn-group">
                <button shiro:hasPermission="role:authorization" class="btn" type="button" onclick="$.role.permisRole()"><i class="icon icon-shield"></i>分配权限</button>
                <button shiro:hasPermission="role:allocationmenu" class="btn" type="button" onclick="$.role.distributionRole();"><i class="icon icon-sitemap"></i>分配菜单</button>
                <button shiro:hasPermission="role:add" class="btn" type="button" data-toggle="modal" data-target="#mymodel"><i class="icon icon-plus-sign"></i>添加角色</button>
                <button shiro:hasPermission="role:edit" class="btn" type="button" onclick="$.role.loadRole('datagridExample');"><i class="icon icon-pencil"></i>编辑角色</button>
                <button shiro:hasPermission="role:delete" class="btn" type="button" onclick="$.role.delRole('datagridExample');"><i class="icon icon-trash"></i>删除角色</button>
            </div>
        </div>
        <div class="lr-layout-body" style="padding-top: 28px; min-height: 0px;">
            <div class="mCustomScrollbar">
                <div id="datagridExample" class="datagrid datagrid-striped">
                    <div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample2" style="margin-bottom: 10px; max-width: 300px">
                        <input id="inputSearchExample2" type="search" class="form-control search-input" placeholder="角色名，角色描述">
                        <label for="inputSearchExample2" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
                    </div>
                    <div class="datagrid-container"></div>
                    <div class="pager"></div>
                </div>
            </div>
        </div>
    </div>
    <!--对话框 用户信息-->
    <div class="modal fade" id="mymodel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title"> <i class="icon icon-user"></i>角色信息</h4>
                </div>
                <div class="modal-body">
                    <form th:action="@{/role/addOrupdate}" method="post" class="form-horizontal" id="roleForm">
                        <div class="form-group">
                            <label for="rolename" class="col-sm-2">角色代码</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="hidden" class="form-control" name="id">
                                <input type="text" class="form-control" id="rolename"  name="rolename"  placeholder="角色名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="roledesc" class="col-sm-2">角色描述</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="text" class="form-control" id="roledesc"  name="roledesc"  placeholder="角色描述" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="enable" class="col-sm-2">状态</label>
                            <div class="col-md-6 col-sm-10">
                                <select class="form-control" id="enable"  name="enable"  placeholder="状态" required="true">
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" onclick="$.ft.reset('roleForm')">重置</button>
                            <button type="button" class="btn btn-primary" onclick="$.ft.submitForm('roleForm','datagridExample');" data-dismiss="modal">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--对话框 角色菜单信息-->
    <div class="modal fade" id="roleModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title" id="title"> <i class="icon icon-sitemap"></i>分配菜单</h4>
                </div>
                <div class="modal-body ztree" id="authorization">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="$.role.saveRoleMenu('authorization',1);" id="save" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    $vui.Loading("拼命加载中，请稍后...",{timeout:0});
    $vui.loadState();
    $(function () {
        $.role.load();
    });
    /*]]>*/
</script>
</html>